<template>
  <div class="cont" style="border: 5px solid #eee;">
    <el-row style="overflow: hidden;">
      <el-image
        class="img"
        :src="formartUrl(article.aTitlePicPath)"
        fit="scale-down"
        style="max-width: 380px; max-height: 170px; width: 100%"
      >
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 标题行：初步设计为一行高度 -->
        <h3 class="titleLabel">
          {{article.aTitle}}
        </h3>
      </el-col>
      <el-col :span="24">
        <!-- 文章简介行：初步设计为两行 -->
        <p class="describeLabel">
          {{article.aDescribe}}
        </p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {fileSiteUrl} from "@/api/constTools"
export default {
  data() {
    return {
      
    };
  },
  props:["article"],
  methods:{
    formartUrl(url){
        // console.log(fileSiteUrl+url);
        return fileSiteUrl+url;
    }
  }
};
</script>
<style scoped>
.cont:hover{
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
.img:hover {
  transform: scale(1.1);
}
.titleLabel {
  margin: 0%;
  text-align: center;
  /* width: 100%; */
  /* height: 5em; */
  /* line-height: 2em; */
  padding: 0% 1em;
  white-space: nowrap;
  /* 2.溢出的部分隐藏起来 */
  overflow: hidden;
  /* 3.文字溢出的时候用省略号来显示 */
  text-overflow: ellipsis;
}
.titleLabel:hover {
  color: brown;
}
.describeLabel {
  margin: 0%;
  text-indent: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
</style>